{{ header }}
{% include 'fastor/template/new_elements/wrapper_top.twig' %}

{% if (settings['comments_engine'] == 'FACEBOOK') %}
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>
{% endif %}

{% set theme_options = registry.get('theme_options') %}
{% set config = registry.get('config') %}
{% set page_direction = theme_options.get( 'page_direction' ) %}
{% set language_id = config.get( 'config_language_id' ) %}

{% if (article|length > 0) %}
    <div class="post">
        <div class="post-entry">
            {% if (article['gallery']|length > 0) %}
                {% if (article['article_list_gallery_display'] == 'CLASSIC') %}
                    <div class="post-media">
                        {{ article['gallery'][0]['output'] }}
                    </div>
                {% endif %}
                {% if (article['article_list_gallery_display'] == 'SLIDER') %}
                    <div class="post-media">
                        <div class="media-slider">
                            {% for gallery in article['gallery'] %}
                                <div class="item">{{ gallery['output'] }}</div>
                            {% endfor %}
                        </div>
                    </div>
                {% endif %}
            {% endif %}
            <div class="post-content">
                {{ article['content']}}
            </div>

            <ul class="meta">
                {% if (author) %}
                    <li>{{ text_posted_by }} : <a href="{{ author['href'] }}">{{ author['name'] }}</a></li>
                {% endif %}
                <li>
                <span class="month">
                    {{ theme_options.date('M', theme_options.strtotime(article['date_published'])) }}
                </span>
                    <span class="day">
                    {{ theme_options.date('d', theme_options.strtotime(article['date_published'])) }},
                </span>
                    <span class="day">
                    {{ theme_options.date('Y', theme_options.strtotime(article['date_published'])) }}
                </span>
                </li>
                {% if (article['categories']|length > 0) %}
                    {% set i = 0 %}
                    <li class="post-categories">
                        <span>{{ text_category }}: </span>
                        {% for cat in article['categories'] %}
                            {% set i = i + 1 %}
                            <a href="{{ cat['href'] }}">{{ cat['name'] }}</a>{% if (i < article['categories']|length) %}, {% endif %}
                        {% endfor %}
                    </li>
                {% endif %}
                {% if (settings['comments_engine'] == 'LOCAL') %}
                    <li>{{ text_comments}}: {{ article['comments_count']}}</li>
                {% endif %}
            </ul>

            {% if (tags) %}
                <div class="tags">
                    {% set i = 0 %}{% for i in i..tags %}
                        <a href="{{ tags[i]['href'] }}">{{ tags[i]['tag'] }}</a>
                    {% endfor %}
                </div>
            {% endif %}

            {% if (settings['author_description'] == 1) %}
                {% if (author|length > 0) %}
                    <div class="blog-post-author">
                        <div class="media">
                            {% if (author['thumb'] is defined) %}
                                <a href="{{ author['href'] }}" class="photo">
                                    <img src="{{ author['thumb'] }}" alt="{{ author['name'] }}">
                                </a>
                            {% endif %}
                            <div class="media-body">
                                <h4 class="media-heading"><a href="{{ author['href'] }}">{{ author['name'] }}</a></h4>
                                <div class="desc">{{ author['description'] }}</div>
                            </div>
                        </div>
                    </div>
                {% endif %}
            {% endif %}

            {% if (articles|length > 0 and settings['article_related_status'] == 1) %}
                {% include 'fastor/template/blog/article_related/' ~ settings['article_related_template']|replace({'.tpl': '.twig'}) %}
            {% endif %}


            {% if (products|length > 0 and settings['product_related_status'] == 1) %}

                {% set class = 3 %}
                {% set id = random(5000)*random(50000) %}
                {% set all = 4 %}
                {% set row = 4 %}

                {% if (settings['product_related_per_row'] == 6) %} {% set class = 2 %} {% endif %}
                {% if (settings['product_related_per_row'] == 5) %} {% set class = 25 %} {% endif %}
                {% if (settings['product_related_per_row'] == 3) %} {% set class = 4 %} {% endif %}

                {% if (settings['product_related_per_row'] > 1) %}
                    {% set row = settings['product_related_per_row'] %}
                    {% set all = settings['product_related_per_row'] %}
                {% endif %}

                <div class="box clearfix box-no-advanced box-with-products {% if (settings['product_scroll_related'] == 1) %} {{ 'with-scroll' }} {% endif %}">
                    {% if (settings['product_scroll_related'] == 1) %}
                        <!-- Carousel nav -->
                        <a class="next" href="#myCarousel{{ id }}" id="myCarousel{{ id }}_next"><span></span></a>
                        <a class="prev" href="#myCarousel{{ id }}" id="myCarousel{{ id }}_prev"><span></span></a>
                    {% endif %}

                    <div class="box-heading">{{ text_related_products }}</div>
                    <div class="clear"></div>
                    <div class="box-content products related-products">
                        <div class="box-product">
                            <div id="myCarousel{{ id }}" {% if (settings['product_scroll_related'] == 1) %}class="carousel slide"{% endif %}>
                                <!-- Carousel items -->
                                <div class="carousel-inner">
                                    {% set i = 0 %} {% set row_fluid = 0 %} {% set item = 0 %} {% for product in products %} {% set row_fluid = row_fluid + 1 %}
                                        {% if (i == 0) %} {% set item = item + 1 %} {{ '<div class="active item"><div class="product-grid"><div class="row">' }} {% endif %}
                                        {% set r=row_fluid-(row_fluid/all)|round(0, 'floor')*all %} {% if (row_fluid>all and r == 1) %} {% if (settings['product_scroll_related'] == 1) %} {{ '</div></div></div><div class="item"><div class="product-grid"><div class="row">' }} {% set item = item + 1 %} {% else %} {{ '</div><div class="row">' }} {% endif %} {% else %} {% set r=row_fluid-(row_fluid/row)|round(0, 'floor')*row %} {% if (row_fluid>row and r == 1) %} {{ '</div><div class="row">' }} {% endif %} {% endif %}
                                        <div class="col-sm-{{ class }} col-xs-6">
                                            {% include 'fastor/template/new_elements/product.twig' %}
                                        </div>
                                        {% set i = i + 1 %} {% endfor %}
                                    {% if (i > 0) %} {{ '</div></div></div>' }} {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}

            {% if (settings['product_scroll_related'] == 1) %}
                <script type="text/javascript">
                    $(document).ready(function() {
                        var owl{{ id }} = $(".box #myCarousel{{ id }} .carousel-inner");

                        $("#myCarousel{{ id }}_next").click(function(){
                            owl{{ id }}.trigger('owl.next');
                            return false;
                        })
                        $("#myCarousel{{ id }}_prev").click(function(){
                            owl{{ id }}.trigger('owl.prev');
                            return false;
                        });

                        owl{{ id }}.owlCarousel({
                            slideSpeed : 500,
                            singleItem:true,
                            {% if (page_direction[language_id] == 'RTL') %}
                            direction: 'rtl'
                            {% endif %}
                        });
                    });
                </script>
            {% endif %}
        </div>
    </div>

    <script>
        $(function(){
            $('.media-slider').owlCarousel({
                navigation : true, // Show next and prev buttons
                slideSpeed : 300,
                paginationSpeed : 400,
                singleItem:true,
                pagination: true,
                autoHeight : true,
                lazyLoad: true,
                navigationText: false,
                {% if (page_direction[language_id] == 'RTL') %}
                direction: 'rtl'
                {% endif %}
            })

            $('#button-comment').on('click', function(e) {
                e.preventDefault();
                $.ajax({
                    url: 'index.php?route=blog/article/write&article_id={{ article_id }}',
                    type: 'post',
                    dataType: 'json',
                    data: $("#form-comment").serialize(),
                    beforeSend: function() {
                        $('#button-comment').button('loading');
                    },
                    complete: function() {
                        $('#button-comment').button('reset');
                    },
                    success: function(json) {
                        $('.alert-success, .alert-danger').remove();

                        if (json['error']) {
                            $('.leave-reply .box-content > *:first-child').before('<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> ' + json['error'] + '</div>');
                        }

                        if (json['success']) {
                            $('.leave-reply .box-content > *:first-child').before('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + '</div>');

                            $('input[name=\'name\']').val('');
                            $('input[name=\'email\']').val('');
                            $('textarea[name=\'content\']').val('');
                        }
                    }
                });
            });
        });
    </script>

{% endif %}

{% include 'fastor/template/new_elements/wrapper_bottom.twig' %}
{% if structured_data is defined %}
    {{ structured_data|raw }}
{% endif %}
{{ footer }}
